<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Formall, styled forms</title>
  <link rel="stylesheet" type="text/css" href="formall.css" />
  <!--[if lte IE 6]><script type="text/javascript" src="IEformall.js" defer></script><![endif]-->
  <style type="text/css">
    form {
	    width:40em;
	    margin:1em auto;
	    Border:solid 1px #F00;
	    padding:0 1em;
	    background:#FEE;
    }
  </style>
</head>
<body>

  <form class="formall" action="" method="post">
    <div class="fieldset">
	  <div>
        <label for="listless_1">Beyond the fieldset</label> <em class="req">*</em>
        <input type="url" id="listless_1" aria-required="true" />
	  </div>
	  <div>
	    <label for="listless_2">Beyond the fieldset 2</label>
        <input type="text" id="listless_2" />
	  </div>
	</div>

    <fieldset>
      <legend>This is a legend</legend>
      <dl class="formlist">
      
        <dt>No label</dt>
        <dd><input type="text" /></dd>
      
        <dt>Geen label met een wel erg lange tekst er in aanwezig</dt>
        <dd><input type="text" /></dd>
        
		<dt><label for="name">Name</label></dt>
		<dd id="error1" class="error" aria-important="true">Uw naam mag enkel alfabetisch zijn</dd>
        <dd><input type="text" id="name" aria-invalid="true" aria-describedby="error1" /></dd>
        
        <dt><label for="msg">Message</label></dt>
        <dd><textarea cols="20" rows="5" id="msg"></textarea></dd>

        <dt>Gender</dt>
        <dd>
          <input type="radio" id="man" name="gender" />
          <label for="man">Male</label>
          <input type="radio" id="woman" name="gender" />
          <label for="woman">Female</label>
        </dd>

		<dt><label for="street">Street</label> <em class="req">*</em></dt>
        <dd>
          <input type="text" id="street" size="40" class="widthauto" aria-describedby="tip1" />
          <label for="number">Number</label>
          <input type="text" id="number" size="2" class="widthauto" aria-describedby="tip1" />
        </dd>
        <dd class="tip" id="tip1">
          Deze hint gaat over het veld hier boven.
        </dd>
        
        <dt>Interests <em class="req">*</em></dt>
        <dd>
          <input type="checkbox" />
          <label>Sports</label>
        </dd>
        <dd>
          <input type="checkbox" />
          <label>Sports</label>
        </dd>
        <dd>
          <input type="checkbox" />
          <label>Sports</label>
        </dd>
        <dd>
          <input type="checkbox" />
          <label>Sports</label>
        </dd>
        
      </dl>
	    <div class="indent">
          <button>Back</button>
          <button>Continue</button>
        </div>
	  <button type="submit">Verzenden</button>
    </fieldset>
    
    <fieldset>
      <ul class="formlist">
      
        <li>
          <input type="checkbox" />
          <label>Mijn label</label>
        </li>  <li>
          <input type="checkbox" />
          <label>Mijn label</label>
          <div class="tip">
            Dit is een hint
          </div>
        </li>  <li>
          <input type="checkbox" />
          <label>Mijn label</label>
          <div class="tip">
            Dit is een hint
          </div>
        </li>  <li>
          <input type="text" size="3" id="order" />
          <label for="order">How many would you like to order?</label>
        </li>
        
    
      </ul>
    </fieldset>
  
  </form>

</body>
</html>